Okay, so I'm practicing my JS and HTML, my current code looks like this:
document.querySelector('input[name="answer"]:checked').checked = false;
let Select = document.querySelector('input[name="answer"]');
Select.addEventListener('change', function(event) {
alert(event.target.value)
})<div>
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>My aim is to cancel first radio's "checked", then add an event that will show each of radio's value whenever I choose/"checked" it, but as you may notice, so far the alert will only shows up if I choose the first radio. So if I may ask, where did I do wrong and how can I fix it?
p.s. For the sake of practicing, the HTML has to stay the same. No adding Id or other selector.
document.querySelector('input[name="answer"]:checked').checked = false;
let radDiv = document.getElementById('radioDiv');
radDiv.addEventListener('change', function(event) {
const tgt = event.target;
if (tgt.matches("[type=radio][name=answer]")) { // check we have the right elements
alert(tgt.value)
}
})<div id="radioDiv">
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>document.querySelector('input[name="answer"]:checked').checked = false;
let Select = document.querySelectorAll('input[name="answer"]');
Select.forEach(el => el.addEventListener('change',function (event) {
Select.forEach(e => alert(e.value));
}))<div>
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>let Select = document.querySelectorAll('input[name="answer"]');
Select.forEach(function(elem) {
elem.addEventListener("change", function(event) {
alert(event.target.value)
});
});
Use above for element selector instead of querySelector which returns a single object (first match)
querySelectorAll returns an array of elements.